<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../libs/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/regist.css">
    <script src="../libs/js/jquery.min.js"></script>
    <script src="../js/regist.js"></script>
</head>

<body>
    <div id="header">
        <!--
            .container 是一个响应式的版心类 会在不同的页面宽度下自适应版心
            添加了 .row类的样式的元素会自动变成display:flex
            添加了 .col类的样式的元素自动 flex:1
            还可以通过flex布局中的属性组成的类名来添加对应的属性 
            这三个通常用于布局
        -->
        <!-- <div class="container-lg" style="height: 100px; background: blue">
            <div class="row align-items-start" style="height: 100px; background: orange">
                <div class="col" style="height: 20px; background: red">1</div>
                <div class="col align-self-center" style="height: 20px; background: green">2</div>
                <div class="col align-self-end" style="height: 20px; background: orange">3</div>
                <div class="col align-self-stretch" style=" background: green">2</div>
            </div>
            <div class="row" style="height: 100px; background: orange">
                <div class="col" style="height: 100px; background: red">1</div>
                <div class="col" style="height: 100px; background: green">2</div>
                <div class="col" style="height: 100px; background: orange">3</div>
                <div class="col" style="height: 100px; background: green">2</div>
            </div>
            <div class="row" style="height: 100px; background: orange">
                <div class="col" style="height: 100px; background: red">1</div>
                <div class="col" style="height: 100px; background: green">2</div>
                <div class="col" style="height: 100px; background: orange">3</div>
                <div class="col" style="height: 100px; background: green">2</div>
            </div>
        </div> -->
        <h1 class="text-center">欢迎光临注册页面</h1>
    </div>
    <div id="content">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col ">
                    <form>
                        <div class="mb-4">
                          <label for="exampleInputEmail1" class="form-label">用户名</label>
                          <input type="text" class="form-control" id="usernameInp" autocomplete="off" >
                          <div id="usernameTips" class="form-text"></div>
                        </div>
                        <div class="mb-3">
                          <label for="exampleInputPassword1" class="form-label">密码</label>
                          <input type="password" class="form-control" id="passwordInp">
                          <div id="passwordTips" class="form-text"></div>
                        </div>
                        <div class="mb-3 text-center">
                            <button id="btn" type="button" class="btn btn-primary">提交</button>
                        </div>
                      </form>
                </div>
            </div>
        </div>
    </div>
    <div id="footer" class="">
        <div class="container"></div>
    </div>
</body>

</html>